<template>
  <div class="dashboard-container">
    <div class="adminContent">
      <div class="title">考勤管理</div>
      <div class="butList">
        <div style="display: inline-block" @click="addHander('add')"><span>+</span> 新增考勤组</div>
      </div>
      <div class="cont">
        <div class="tableCont">
          <el-table ref="multipleTable" :data="tableData" style="width: 100%">
            <el-table-column align="center" label="名称" width="120">
              <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column align="center" label="人数" prop="memberNum" width="120" />
            <el-table-column align="center" prop="name" label="考勤时间">
              <template slot-scope="scope">
                <p>每周 {{ workdays(scope.row.workdays, 0) }}  休息</p>
                <p>每周：{{ workdays(scope.row.workdays, 1) }} {{ scope.row.startWorkTime }} - {{ scope.row.offWorkTime }} </p>
              </template>
            </el-table-column>
            <el-table-column width="120" prop="address" center label="操作" show-overflow-tooltip>
              <template slot-scope="scope">
                <span class="actLab" @click="editerHander(scope.row)">编辑</span>
                <span class="actLab" @click="delHander(scope.row)">删除</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="pageList">
            <el-pagination
              v-if="total>pageSize"
              layout="prev, pager, next"
              :total="total"
              @current-change="handlePageChange"
            />
          </div>
        </div>
      </div>
      <el-dialog :title="title" :visible.sync="dialogVisible" width="70%" center>
        <div class="editCont">
          <el-form ref="ruleForm" :model="ruleForm" label-width="140px" class="demo-ruleForm">
            <el-form-item label="考勤组名称" prop="name" size="mini" style="width: 315px;">
              <el-input v-model="ruleForm.name" placeholder="请输入考勤组名称" />
            </el-form-item>
            <el-form-item label="参与考勤人员" prop="region">
              <Cascader sel-style="min-width:175px" :dialog-visible="dialogVisible" :check-list-dataes="ruleForm.participates" @getValue="getValue" />
            </el-form-item>
            <el-form-item label="无需考勤人员" prop="region">
              <Cascader sel-style="min-width:175px" :check-list-dataes="ruleForm.notParticipates" @getValue="getValueUn" />
            </el-form-item>
            <el-form-item label="考勤组负责人" prop="region">
              <el-select v-model="ruleForm.managerId" size="mini" placeholder="请选择考勤组负责人">
                <el-option v-for="item in memberList" :key="item.id" :label="item.username" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="设置上下班时间" size="mini" style="width: 390px;">
              <div style="height: 40px;">
                <el-col :span="11">
                  <el-time-picker v-model="ruleForm.startWorkTime" placeholder="选择时间" value-format="HH:mm:ss" size="mini" style="width: 100%;" />
                </el-col>
                <el-col class="line" style="text-align: center" :span="1">-</el-col>
                <el-col :span="11">
                  <el-time-picker v-model="ruleForm.offWorkTime" placeholder="选择时间" value-format="HH:mm:ss" size="mini" style="width: 100%;" />
                </el-col>
              </div>
              <div style="margin-top: 5px;">
                <el-checkbox v-model="startWorkTime" label="允许迟到分钟数" name="type" />
                <span v-if="startWorkTime"><input v-model="ruleForm.allowLateMinutes" type="number" placeholder="请输入" class="miniInput"> 分</span>
              </div>
              <div style="margin-top: 5px;">
                <el-checkbox v-model="offWorkTime" label="旷工迟到分钟数" name="type" />
                <span v-if="offWorkTime"><input v-model="ruleForm.completionLimitMinutes" type="number" placeholder="请输入" class="miniInput"> 分</span>
              </div>
            </el-form-item>
            <el-form-item label="工作日设置" prop="type">
              <el-checkbox-group v-model="ruleForm.workdays">
                <el-checkbox label="1" name="1">周一</el-checkbox>
                <el-checkbox label="2">周二</el-checkbox>
                <el-checkbox label="3">周三</el-checkbox>
                <el-checkbox label="4">周四</el-checkbox>
                <el-checkbox label="5">周五</el-checkbox>
                <el-checkbox label="6">周六</el-checkbox>
                <el-checkbox label="7">周日</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="特殊日期" prop="type">
              <div><span class="addLab" @click="workTimeSet('add', 'must')">点击添加</span> 必须打卡的日期</div>
              <div v-show="mustCardsDateSt">
                <el-date-picker v-model="mustCardsDate" type="date" value-format="timestamp" size="mini" placeholder="选择日期" />
                <span class="addLab" @click="addWorkDate('must')">{{ active }}</span>
              </div>
              <div v-if="mustCardsDateItem.length > 0" class="table">
                <div class="tbHead"><div>必须打卡日期</div><div>操作</div></div>
                <div v-for="item in mustCardsDateItem" :key="item" class="tbTr">
                  <div>{{ moment(Number(item)).format('YYYY-MM-DD') }}</div>
                  <div> <span class="act" @click="workTimeSet('edit', 'must', item)">编辑</span> <span class="act" @click="workTimeSet('del', 'must',item)">删除</span> </div>
                </div>
              </div>
              <div> <span class="addLab" @click="workTimeSet('add', 'non')">点击添加</span> 不用打卡的日期</div>
              <div v-show="nonCardsDateSt">
                <el-date-picker v-model="nonCardsDate" type="date" value-format="timestamp" size="mini" placeholder="选择日期" />
                <span class="addLab" @click="addWorkDate('non')">{{ active }}</span>
              </div>
              <div v-if="nonCardsDateItem.length > 0" class="table">
                <div class="tbHead"><div>不用打卡日期</div><div>操作</div></div>
                <div v-for="item in nonCardsDateItem" :key="item" class="tbTr">
                  <div>{{ moment(Number(item)).format('YYYY-MM-DD') }}</div>
                  <div> <span class="act" @click="workTimeSet('edit', 'non', item)">编辑</span> <span class="act" @click="workTimeSet('del', 'non', item)">删除</span> </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="考勤方式" prop="type">
              <div><span class="address" @click="mapOpenHander">添加考勤地点</span> 有效范围 <input v-model="ruleForm.range" class="miniInput" type="text" size="mini"> 米</div>
            </el-form-item>
            <div v-if="mapOpen" class="map">
              <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult" />
              <el-amap vid="amapDemo" :center="mapCenter" :plugin="plugin" :zoom="12" class="amap">
                <template v-if="markers.length">
                  <el-amap-marker v-for="(marker,index) in markers" :key="index" :position="marker.position" :title="marker.name">
                    <span class="markerLab" @click="addMarker(marker)"><i class="icon">&#xe66b;</i></span>
                  </el-amap-marker>
                </template>

              </el-amap>
              <div class="mapFoot">
                <div>
                  <div style="margin-bottom: 15px;">地址名称：<input v-model="mapName" type="text" placeholder="请输入"></div>
                  <div>详细地址：{{ mapAddress }}</div>
                </div>
                <div class="botItem">
                  <span class="cancelSub" @click="() => mapOpen = false">取消</span>
                  <span class="confirmSub" @click="mapInfoHander() ">确定</span>
                </div>
              </div>
            </div>
            <div v-if="mapAdderssItems.length > 0" class="addressItems">
              <div class="addTit"><span class="icon">&#xe667;</span> 考勤地点</div>
              <div v-for="(item, index) in mapAdderssItems" :key="index" class="addItems">
                <div>
                  <p><i class="icon">&#xe667;</i>{{ item.addressName }}</p>
                  <p class="addDes">{{ item.address }}</p>
                </div>
                <div class="del" @click="delMapInfoHander"><span>删除</span></div>
              </div>
            </div>
            <div class="dialog-footer">
              <el-button type="primary" size="mini" style="background: #3345ff;border:none;" @click="submitSetAdmin('ruleForm')">保存</el-button>
            </div>
          </el-form>
        </div>
      </el-dialog>
      <!--      // 删除-->
      <el-dialog title="确认删除" :visible.sync="qurenDel" width="30%" center>
        <div style="text-align: center">
          <p><i class="icon" style="color:#f48181;font-size: 40px;margin: 10px;">&#xe685;</i></p>
          <p>确认后该信息将被删除，</p>
          <p>并不可恢复，是否确认删除？</p>
        </div>
        <div class="submitBox">
          <el-button size="mini" style="color:#3345ff;" @click="qurenDel = false">取 消</el-button>
          <el-button size="mini" class="submit" type="primary" @click="confirmDel">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Cascader from './../../components/Cascader'

export default {
  name: 'Dashboard',
  components: {
    Cascader
  },
  data() {
    return {
      qurenDel: false,
      delId: '',
      dialogVisible: false,
      loading: false,
      title: '添加考勤组',
      tableData: [],
      active: '添加',
      total: 0,
      page: 1,
      pageSize: 8,
      mustCardsDate: '',
      mustCardsDateSt: false,
      mustCardsDateItem: [],
      nonCardsDate: '',
      nonCardsDateSt: false,
      nonCardsDateItem: [],
      value: '',
      options: [],
      adminListData: [],
      memberList: [],
      checkList: [],
      checkListes: [],
      cardsDate: '',
      noCardsDate: '',
      startWorkTime: '',
      offWorkTime: '',
      chgCardsDateNum: '',
      formDataInit: {
        name: '',
        participates: [],
        notParticipates: [],
        managerId: '',
        managerType: '1',
        startWorkTime: '',
        offWorkTime: '',
        allowLateMinutes: '',
        completionLimitMinutes: '',
        workdays: [],
        extraConfig: [],
        lat: '',
        lng: '',
        range: 300,
        addressName: '',
        address: '',
        id: ''
      },
      ruleForm: {},
      zoom: 10,
      markers: [],
      searchOption: {
        city: '北京',
        citylimit: false
      },
      mapCenter: [116.39, 39.9],
      plugin: [{ pName: 'ToolBar' }],
      poit: [],
      mapOpen: false,
      mapName: '',
      mapAddress: '',
      mapAdderssItems: []
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },

  created() {
    this.init()
    this.getMemberList()
    this.ruleForm = this.formDataInit
  },
  methods: {
    init() {
      this.$store.dispatch('attendance/getAattendGroupLilsAct', { page: this.page, pageSize: this.pageSize }).then((res) => {
        this.tableData = res.rows
        this.total = Number(res.total)
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    getAdminList() {
      this.$store.dispatch('company/getCompanyAdminListAct').then((res) => {
        this.adminListData = res
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    getMemberList() {
      this.$store.dispatch('organization/getSimMemberAct', { pageSize: 1000, includeSub: 0 }).then((res) => {
        this.memberList = res.rows
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    getValue(val) {
      this.ruleForm.participates = val.map(n => {
        return { objectId: n.id, objectType: n.type }
      })
    },
    getValueUn(val) {
      this.ruleForm.notParticipates = val.map(n => {
        return { objectId: n.id, objectType: n.type }
      })
    },
    // 特殊日期处理
    workTimeSet(st, tg, dat) {
      if (tg === 'must') {
        this.nonCardsDateSt = false
        if (st === 'add') {
          this.mustCardsDateSt = true
          this.active = '添加'
          this.mustCardsDate = ''
        } else if (st === 'edit') {
          this.mustCardsDateSt = true
          this.active = '修改'
          this.mustCardsDate = dat
          this.chgCardsDateNum = this.mustCardsDateItem.indexOf(dat)
        } else if (st === 'del') {
          const num = this.mustCardsDateItem.indexOf(dat)
          this.mustCardsDateItem.splice(num, 1)
        }
      } else if (tg === 'non') {
        this.mustCardsDateSt = false
        if (st === 'add') {
          this.nonCardsDateSt = true
          this.active = '添加'
          this.nonCardsDate = ''
        } else if (st === 'edit') {
          this.nonCardsDateSt = true
          this.active = '修改'
          this.nonCardsDate = dat
          this.chgCardsDateNum = this.nonCardsDateItem.indexOf(dat)
        } else if (st === 'del') {
          const num = this.nonCardsDateItem.indexOf(dat)
          this.nonCardsDateItem.splice(num, 1)
        }
      }
    },
    // 添加特殊日期
    addWorkDate(st) {
      if (st === 'must') {
        if (!this.mustCardsDate) {
          this.$message.error('请先选择日期！')
          return false
        }
        console.log(this.mustCardsDateItem.indexOf(this.mustCardsDate))
        if (this.mustCardsDateItem.indexOf(this.mustCardsDate) !== -1 || this.nonCardsDateItem.indexOf(this.mustCardsDate) !== -1) {
          this.$message.error('该日期已被选中,请重新调整！')
          return
        }
        if (this.active === '修改') {
          this.mustCardsDateItem.splice(this.chgCardsDateNum, 1, this.mustCardsDate)
          this.mustCardsDateSt = false
        } else {
          this.mustCardsDateItem.push(this.mustCardsDate)
          this.mustCardsDateSt = false
        }
      } else {
        if (!this.nonCardsDate) {
          this.$message.error('请先选择日期！')
          return false
        }
        if (this.mustCardsDateItem.indexOf(this.nonCardsDate) !== -1 || this.nonCardsDateItem.indexOf(this.nonCardsDate) !== -1) {
          this.$message.error('该日期已被选中,请重新调整！')
          return
        }
        if (this.active === '修改') {
          this.nonCardsDateItem.splice(this.chgCardsDateNum, 1, this.nonCardsDate)
          this.nonCardsDateSt = false
        } else {
          this.nonCardsDateItem.push(this.nonCardsDate)
          this.nonCardsDateSt = false
        }
      }
    },
    addHander() {
      this.title = '添加考勤组'
      this.ruleForm = this.formDataInit
      this.dialogVisible = true
    },
    // 编辑考勤组
    editerHander(row) {
      this.$store.dispatch('attendance/getAttendGroupInfoAct', { id: row.id }).then((res) => {
        if (!res.success) {
          this.$message.error('信息获取失败，请稍后重试')
          return
        }
        this.ruleForm = res.data
        this.startWorkTime = !!res.data.allowLateMinutes
        this.offWorkTime = !!res.data.completionLimitMinutes
        const workArr = []
        res.data.workdays.forEach((n, i) => {
          if (n === 1) {
            workArr.push(String(i + 1))
          }
        })
        this.ruleForm.workdays = workArr
        res.data.extraConfig.forEach(n => {
          if (n.requiredAttend === 1) {
            this.mustCardsDateItem = []
            this.mustCardsDateItem.push(n.setDate)
          } else if (n.requiredAttend === 0) {
            this.nonCardsDateItem = []
            this.nonCardsDateItem.push(n.setDate)
          }
        })
        if (res.data.address) {
          this.mapAdderssItems = [{ address: res.data.address, addressName: res.data.addressName }]
        }
        this.title = '编辑考勤组'
        this.dialogVisible = true
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 删除
    delHander(row) {
      this.delId = row.id
      this.qurenDel = true
    },
    confirmDel() {
      this.$store.dispatch('attendance/delAttendGroupInfoAct', { id: this.delId }).then((res) => {
        this.qurenDel = false
        this.$message.success('删除成功！')
        this.init()
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 分页
    handlePageChange(val) {
      this.page = val
      this.init()
    },
    // 特殊日期处理
    cgData() {
      const dateArray = []
      const mustDate = this.mustCardsDateItem
      const nonDate = this.nonCardsDateItem
      if (mustDate.length > 0) {
        mustDate.forEach(n => {
          dateArray.push({ setData: this.moment(n).format('YYYY-MM-DD'), requiredAttend: 1 })
        })
      }
      if (nonDate.length > 0) {
        nonDate.forEach(n => {
          dateArray.push({ setData: this.moment(n).format('YYYY-MM-DD'), requiredAttend: 0 })
        })
      }
      return dateArray
    },
    // 提交
    submitSetAdmin() {
      const params = { ...this.ruleForm }
      params.extraConfig = this.cgData()
      params.workdays = this.workDaysComplate(params.workdays)
      params.extraConfig = this.extraConfigComplate()
      console.log(params)
      if (!params.name) {
        this.$message.error('请输入考勤组名称！')
        return false
      }
      if (!params.managerId) {
        this.$message.error('请选择考勤组负责人！')
        return false
      }
      if (!params.startWorkTime || !params.offWorkTime) {
        this.$message.error('请设置上下班时间！')
        return false
      }
      if (!params.range) {
        this.$message.error('请添写考勤范围！')
        return false
      }
      if (!params.address) {
        this.$message.error('请添加考勤地点！')
        return false
      }
      console.log(params)
      const url = this.title === '添加考勤组' ? 'attendance/addAttendGroupAct' : 'attendance/putAttendGroupInfoAct'
      this.$store.dispatch(url, { ...params }).then((res) => {
        this.$message.success('数据提交成功！')
        this.init()
        this.dialogVisible = false
        this.adminListData = res
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    addMarker(obj) {
      this.mapName = obj.name
      this.mapAddress = obj.address
      this.poit = obj.position
    },
    // 打开考勤地图
    mapOpenHander() {
      if (this.mapAdderssItems.length === 0) {
        this.mapOpen = true
        this.mapName = ''
        this.markers = []
        this.mapAddress = '请选择地点'
      } else {
        this.$message.error('已存在考勤地点，请删除后再添加')
      }
    },
    // 地图搜索
    onSearchResult(pois) {
      let latSum = 0
      let lngSum = 0
      if (pois.length > 0) {
        pois.forEach(poi => {
          const { lng, lat } = poi
          lngSum += lng
          latSum += lat
          this.markers.push({ position: [poi.lng, poi.lat], name: poi.name, address: poi.address })
        })
        const center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length
        }
        this.mapCenter = [center.lng, center.lat]
      } else {
        this.markers = []
      }
    },
    // 地理位置确定
    mapInfoHander() {
      if (!this.mapName) {
        this.$message.error('请输入名称！')
        return false
      }
      console.log(this.mapAddress)
      if (this.mapAddress === '请选择地点') {
        this.$message.error('请先搜索并选择地点！')
        return false
      }
      this.mapAdderssItems.push({ addressName: this.mapName, address: this.mapAddress })
      this.ruleForm.addressName = this.mapName
      this.ruleForm.address = this.mapAddress
      this.ruleForm.lat = this.poit[0]
      this.ruleForm.lng = this.poit[1]
      this.mapOpen = false
      this.addressName = ''
      this.address = ''
      this.markers = []
      console.log()
    },
    // 地理位置删除
    delMapInfoHander() {
      this.mapAdderssItems = []
    },
    // 数据处理函数
    // 工作日数据处理
    workdays(val, st) {
      const lat = []
      val.forEach((n, i) => {
        if (n === st) {
          switch (i) {
            case 0 :
              lat.push('一')
              break
            case 1 :
              lat.push('二')
              break
            case 2 :
              lat.push('三')
              break
            case 3 :
              lat.push('四')
              break
            case 4 :
              lat.push('五')
              break
            case 5 :
              lat.push('六')
              break
            case 6 :
              lat.push('日')
              break
          }
        }
      })
      return lat.join('、')
    },
    // workDays 数据处理
    workDaysComplate(obj) {
      const workArr = []
      for (let i = 1; i <= 7; i++) {
        if (obj.indexOf(String(i)) !== -1) {
          workArr.push(1)
        } else {
          workArr.push(0)
        }
      }
      return workArr
    },
    // 特殊日期数据处理
    extraConfigComplate() {
      const arr = []
      this.mustCardsDateItem.forEach(n => {
        const dat = { setDate: n, requiredAttend: 1 }
        arr.push(dat)
      })
      this.nonCardsDateItem.forEach(n => {
        const dat = { setDate: n, requiredAttend: 0 }
        arr.push(dat)
      })
      return arr
    }

  }
}
</script>
<style lang="scss">
  .adminContent {
    .el-table thead th, .el-table thead tr {
      background: #edeffd;
    }

    .pageList {
      text-align: right;
      padding: 10px 0;
      .el-pager li {
        margin: 0 5px;
        min-width: 28px;
        width: 28px;
      }

      .active {
        background: #3345ff;
        border-radius: 100%;
        color: #fff;
      }
    }

    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
      background: #3345ff;
      border-color: #3345ff;
    }
    .el-checkbox__input.is-checked+.el-checkbox__label{
      color:#606266;
    }
    .search-tips{
      min-width: 200px;
      box-shadow: 0 0 4px #ccc;
      border:none !important;
      margin-top: 4px;
      li{
        border:none;
      }
    }
  }
</style>
<style lang="scss" scoped>
  .dashboard {
    &-container {
      .adminContent {
        .title {
          text-align: center;
          padding: 0 15px;
          line-height: 40px;
          background: #eceffc;
        }
        .butList{
          padding: 0 20px;
          cursor: pointer;
          color: #3345ff;
          font-size: 14px;
          line-height: 50px;
          span{
            display: inline-block;
            position: relative;
            top:-1px;
            text-align: center;
            font-weight: bold;
            margin-right: 2px;
            color:#fff;
            background: #3345ff;
            line-height: 12px;
            height: 14px;
            width: 14px;
            border-radius: 100%;
          }
        }
        .cont {
          padding:0 20px;
          .tableCont{
            background: #fff;
            p{
              margin: 0px;
            }
          }
          .titlab{
            margin: 0 4px;
            font-size: 12px;
            border-radius: 4px;
            padding: 4px 10px;
          }
          .actLab{
            color:#3345ff;
            margin: 0 4px;
            cursor: pointer;
          }
        }
        .itemsLIst{
          display: flex;
          flex-wrap: wrap;
          line-height: 40px;
          .items{
            width: calc(50% - 5px);
            display: flex;
            justify-content: space-between;
            box-shadow: 2px 2px 10px #e6e6e6;
            margin: 5px 0;
            border-radius: 5px;
            padding: 10px 15px;
            .lab{
              display: inline-block;
              text-align: center;
              width: 40px;
              height: 40px;
              color:#fff;
              border-radius: 100px;
              font-size: 22px;
              margin-right: 10px;
            }
          }
          .items:nth-child(2n-1){
            margin-right: 10px;
          }
        }
        .tit{
          line-height: 50px;
        }
        .dialog-footer{
          display: flex;
          justify-content: center;
          text-align: center;
          margin-top: 30px;
        }
        .miniInput {
          width: 58px;
          line-height: 17px;
          border-radius: 3px;
          font-size: 12px;
          border: solid 1px #ccc;
          padding: 3px 4px;
        }
        .addLab{
          background: #3345ff;
          color:#fff;
          padding: 4px 10px;
          border-radius: 3px;
          font-size: 12px;
          cursor: pointer;
        }
        .table{
          width: 400px;
          border-radius: 3px;
          box-shadow: 0px 0px 4px #ccc;
          .tbHead{
            background: #eceffc;
            display: flex;
            text-align: center;
            div{
              flex: 1;
            }
          }
          .tbTr{
            display: flex;
            text-align: center;
            div{
              flex: 1;
            }
            .act{
              cursor: pointer;
              color:#3345ff;
            }
          }
        }
        .address{
          color: #3345ff;
          cursor: pointer;
          margin-right: 10px;
        }
        .map{
          background: #fff;
          box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
          margin-bottom: 20px;
          position: relative;
          .amap {
            height: 300px;
            border-radius: 3px;
          }
          .search-box {
            position: absolute;
            top: 25px;
            right: 20px;
            width: 200px;
            height: 35px;
            border-radius: 3px;
            box-shadow: 0 0 4px #ccc;
          }
          .markerLab{
            display: inline-block;
            text-align: center;
            .icon{
              color: #ff0000;
              font-size: 32px;
              text-shadow: 0 0 4px #ccc;
            }
          }
          .amap-page-container {
            position: relative;
          }
          .mapFoot{
            padding: 15px;
            display: flex;
            justify-content: space-between;
            input{
              border-radius: 3px;
              border: solid 1px #e8e9ea;
              padding: 2px 5px;
            }
            .botItem{
              display: flex;
              align-items: center;
            }
            .cancelSub, .confirmSub{
              border:solid 1px #3345ff;
              color: #3345ff;
              border-radius: 3px;
              cursor: pointer;
              margin: 10px;
              padding: 4px 10px;
            }
            .confirmSub{
              color: #fff;
              background: #3345ff;
            }
          }
        }
        .submitBox {
          display: flex;
          justify-content: center;
          margin-top: 20px;

          .submit {
            background: #3345ff;
            border-color: #3345ff;
          }
        }
        .addressItems{
          box-shadow: 0px 0px 4px #ccc;
          border-radius: 3px;
          line-height: 25px;
          width: 400px;
          margin-left: 142px;
          .icon{
            color:#f00;
          }
          .addTit {
            border-bottom: solid 1px #ccc;
            padding:10px 15px;
          }
          .addItems{
            padding: 10px 15px;
            display: flex;
            justify-content: space-between;
            p{
              margin: 0;
              padding: 0;
              .icon{
                font-size: 14px;
              }
            }
            .del{
              text-align: right;
              display: flex;
              align-items: center;
              color: #3345ff;
            }
          }
          .addDes{
            color:#999;
          }
        }
      }
    }
  }
</style>
